<template>
  <div class="Tops">
    <input type="text" v-model="store.Val" @keyup.enter="add" class="inp" />
    <button @click="add" class="but">
      <span>Submit</span>
    </button>
  </div>
</template>

<script setup>
import { useStore } from "../stores/counter";
const store = useStore();
const add = () => {
  if (store.Val.trim() === "") {
    return;
  } else {
    let obj = {
      name: store.Val,
      flag: false,
    };
    store.List.push(obj);
    store.Val = "";
  }
};
defineProps({
  msg: {
    type: String,
    required: true,
  },
});
</script>

<style scoped>
.Tops {
  width: 500px;
  margin: 40px auto;
  height: 50px;
}

.inp {
  margin-left: 80px;
  border: none;
  border-bottom: 3px dashed #fe7345;
  padding: 5px 0 3px;
  font-size: 18px;
  outline: none;
  background-color: transparent;
}

.but {
  position: relative;
  margin-left: 20px;
  transform: rotate(4deg);
  border-radius: 6px;
  z-index: 99;
  background-color: #fff;
  border: none;
  z-index: 99;
}

.but span {
  position: relative;
  display: block;
  font-size: 16.5px;
  padding: 0.34em 0.84em;
  border: 2px solid #494a4b;
  border-radius: inherit;
  background-color: #fff;
  z-index: 99;
}

.but span ::before {
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 100%;
  height: 100%;
  transform: scaleY(1.1);
  border: 1px solid #494a4b;
  border-radius: inherit;
  transform-origin: top;
  background-color: #fe7345;
  background-image: url();
}
</style>
